<template>
  <el-form :inline="true" :model="form" class="demo-form-inline">
    <el-form-item label="栏目名称">
      <el-input v-model="form.name" placeholder="栏目名称" clearable />
    </el-form-item>

    <el-form-item label="状态" >
      <el-select v-model="form.status" placeholder="please select " style="width: 200px" clearable >
        <el-option label="已上线"  value="已上线" ></el-option>
        <el-option label="已下线"  value="已下线" ></el-option>
        <el-option label="草稿"  value="草稿" ></el-option>
      </el-select>
    </el-form-item>


    <el-form-item>
      <el-button type="primary" @click="list">查询</el-button>
    </el-form-item>
  </el-form>


  <el-table :data="tableData" style="width: 100%">
    <el-table-column  prop="name" label="栏目名称" width="150" />
    <el-table-column prop="type" label="栏目类型" width="120" />
    <el-table-column prop="nickname" label="栏目别名" width="120" />
    <el-table-column prop="createTime" label="创建时间" width="120" />
    <el-table-column prop="ms" label="栏目描述" width="120" />
    <el-table-column prop="updateTime" label="更新时间" width="120" />
    <el-table-column prop="status" label="状态" width="120" />
    <el-table-column fixed="right" label="Operations" min-width="120">
      <template v-slot="s">
        <el-button link type="primary" size="small" @click="detail(s.row.id)">详情</el-button>
        <el-button link type="primary" size="small" @click="up(s.row.id)">点赞({{s.row.upNumber}})</el-button>

      </template>
    </el-table-column>
  </el-table>


</template>

<script lang="ts" setup>
import {reactive, ref, onMounted} from 'vue'
import {list2ChannelService, upService} from "@/api/channel2";
import router from "@/router";
import {ElMessage} from "element-plus";

const tableData = ref([])
 let form =reactive({
   name:'',
   status: '',
 })

 const  list= ()=>{
   list2ChannelService(form).then(res=>{
     tableData.value=res.data;
   })
 }
const detail=(id)=>{
  router.push("/comment?id="+id)
}
//点赞
const  up=(id)=>{
  upService(id).then(res=>{
    if(res.code ==200){
      ElMessage.success(res.msg);
      list();
    }else{
      ElMessage.warning(res.msg);
    }
  })
}



onMounted(()=>{
  list();
})



</script>

<style>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}


</style>